<template>
	<view class="top-bar">
		<view class="line" :class="type==index&&'checked'" v-for="(item, index) in bar" :key="index"
			@click="handleBarClick(item, index)">
			{{ item.label }}
			<view class="bj"></view>
		</view>
		<up-overlay :show="show" @click="show = false">
			<view class="rect" @tap.stop>
				<template v-if="type == 0 || type == 2">
					<City v-if="type == 0" :data="form.start_city" :citys="hot_start_city"
						@change="form.start_city = $event" />
					<City v-if="type == 2" :data="form.recipient_city" :citys="hot_end_city"
						@change="form.recipient_city = $event" />
				</template>
				<template v-if="type == 1">
					<picker-view class="picker-view" :value="time" @change="handleChange">
						<picker-view-column>
							<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
						</picker-view-column>
					</picker-view>
				</template>
				<template v-if="type == 3">
					<view class="title">类别</view>
					<view class="line-list">
						<view class="line" :class="form.transport_type == index&&'checked'"
							@click="form.transport_type = index" v-for="(item, index) in category" :key="index">
							{{ item }}
						</view>
						<view class="i"></view>
					</view>
					<view class="title">出行方式</view>
					<view class="line-list">
						<view class="line" :class="form.delivery_type == index&&'checked'"
							@click="form.delivery_type = index" v-for="(item, index) in tripMode" :key="index">
							{{ item }}
						</view>
						<view class="i"></view>
					</view>
				</template>
				<view class="bottom-button">
					<view class="">
						<up-button @click="show = false" type="info" text="取消"></up-button>
					</view>
					<view class="">
						<up-button @click="handleSumbit" type="primary" text="确定"></up-button>
					</view>
				</view>
			</view>
		</up-overlay>
	</view>
</template>

<script setup>
	import City from './city.vue'
	import {
		ref,
		onMounted
	} from 'vue'
	import trip from '@/api/trip.js'
	const props = defineProps({
		data: {
			type: Object,
			default: () => {}
		}
	})
	const show = ref(false)
	const bar = ref([{
		label: '出发地'
	}, {
		label: '出发时间'
	}, {
		label: '目的地'
	}, {
		label: '筛选'
	}])
	const top = ref(0)
	const type = ref(-1)
	const form = ref({
		start_city: '',
		start_time: '',
		recipient_city: '',
		transport_type: '',
		delivery_type: '',
	})
	const hot_start_city = ref([])
	const hot_end_city = ref([])
	const category = ['不限', '人宠同行', '宠物独行']
	const tripMode = ['不限', '拼车', '专车']
	const handleBarClick = async (val, index) => {
		type.value = index
		show.value = true
		if (index == 0 || index == 2) {
			const {
				status,
				info,
				data
			} = await trip.getSysParam()
			if (status == 1) {
				hot_start_city.value = data.hot_start_city
				hot_end_city.value = data.hot_end_city
			}
		}
	}
	const newDate = new Date()
	const years = ref([])
	const year = newDate.getFullYear()
	const months = ref([])
	const month = newDate.getMonth()
	const days = ref([])
	const day = newDate.getDate()
	// 用来展示的time
	const time = ref([])
	const handleChange = (e) => {
		time.value = e.detail.value
	}
	onMounted(async () => {
		await setTime()
	})
	// 设置数组
	const setTime = () => {
		for (let i = year; i < year + 100; i++) {
			years.value.push(i)
		}
		for (let i = 1; i <= 12; i++) {
			months.value.push(i)
		}
		for (let i = 1; i <= 31; i++) {
			days.value.push(i)
		}
		time.value = [0, month, day]
	}
	onMounted(() => {
		uni.getSystemInfo({
			success: (e) => {
				top.value = e.windowTop + 39 + 'px'
			}
		})
	})
	const emits = defineEmits(['change'])
	const handleSumbit = () => {
		let newYear = years.value[time.value[0]]
		let newMonth = months.value[time.value[1]]
		let newDay = days.value[time.value[2]]
		form.value.time = `${newYear}年${newMonth}月${newDay}日`
		show.value = false
		emits('change', form.value)
	}
</script>
<script>
	export default {
		options: {
			styleIsolation: 'shared'
		}
	}
</script>
<style lang="scss" scoped>
	.top-bar {
		height: 78rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 42rpx;
		background: #fff;
		position: relative;

		.line {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #A6A1A1;
			line-height: 39rpx;
			display: flex;
			align-items: center;

			.bj {
				width: 26rpx;
				height: 20rpx;
				margin-left: 8rpx;
				background-size: 100% 100% !important;
				background: url('@/static/image/bar1.png') no-repeat;
			}
		}

		.checked {
			color: #F1692B;

			.bj {
				background: url('@/static/image/bar2.png') no-repeat;
			}
		}

		::v-deep .u-transition {
			top: v-bind('top') !important;
		}

		.rect {
			width: 100%;
			background: #fff;
			padding: 30rpx 40rpx;
			box-sizing: border-box;
			border-radius: 0 0 32rpx 32rpx;

			.input {
				display: flex;
				align-items: center;
				height: 80rpx;
				background: #F6F6F6;
				border-radius: 20rpx;
				padding: 0 30rpx;

				image {
					width: 26rpx;
					margin-right: 20rpx;
				}

				input {
					width: calc(100% - 46rpx);
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					line-height: 33rpx;
				}
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #2C1F21;
				line-height: 33rpx;
				margin: 20rpx 0;
			}

			.line-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.line {
					width: calc((100% - 40rpx) / 3);
					display: flex;
					align-items: center;
					justify-content: center;
					height: 64rpx;
					background: #F6F6F6;
					border-radius: 16rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #A6A1A1;
					line-height: 33rpx;
					border: 1px solid #F6F6F6;
				}

				.checked {
					border: 2rpx solid #F1692B;
					background: #FFF7F4;
					color: #F1692B;
				}

				.i {
					width: calc((100% - 40rpx) / 3);
				}

				.line:nth-child(n+4) {
					margin-top: 20rpx;
				}
			}

			.picker-view {
				width: 100%;
				height: 220rpx;
				margin: 40rpx 0;

				.item {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #2c1f21;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.bottom-button {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;

				view:first-child {
					width: 35%;
				}

				view:last-child {
					width: 60%;
				}
			}
		}
	}
</style>